<template>
  <div class="Personal-container">
    <el-card class="box-card">
      <div slot="header">
        <span>个人中心</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">重置密码</el-button>
        <el-button style="float: right; padding: 3px 0; margin-right: 30px;" type="text" @click="dialogVisible2 = true">修改信息</el-button>
      </div>
      <div class="text">
        <p>{{ '职工姓名：' + userInfo.name }}</p>
        <p>{{ '职工邮箱：' + userInfo.email }}</p>
        <p>职工权限：{{ userInfo.role | roleFormat }}</p>
      </div>
    </el-card>

    <el-dialog title="重置密码" :visible.sync="dialogVisible" width="40%" @close="() => this.$refs.form.resetFields()">
      <el-form :model="form" label-width="80px" :rules="rules" ref="form">
        <el-form-item label="旧密码" prop="oldpassword">
          <el-input v-model="form.oldpassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input v-model="form.newpassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetpassword">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="dialogVisible2" width="40%" @close="() => this.$refs.form2.resetFields()">
      <el-form :model="form2" label-width="80px" :rules="rules2" ref="form2">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form2.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form2.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Personal',
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      form: {
        oldpassword: '',
        newpassword: '',
      },
      rules: {
        oldpassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        ],
        newpassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        ],
      },
      form2: {
        name: '',
        email: '',
      },
      rules2: {
        name: [{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }],
        email: [{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
      },
    }
  },
  created() {},
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    async updateUserInfo() {
      const { data: res } = await this.$http.get('/api/employees/userinfo')
      this.$store.commit('initUserInfo', res)
    },
    resetpassword() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return this.$message.error('表单验证不通过')
        const { data: res } = await this.$http.post('/api/employees/resetpwd', this.form)
        if (res.status !== 0) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.dialogVisible = false
      })
    },
    edit() {
      this.$refs.form2.validate(async (valid) => {
        if (!valid) return this.$message.error('表单验证不通过')
        const { data: res } = await this.$http.post('/api/employees/edit', this.form2)
        if (res.status !== 0) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.dialogVisible2 = false
        this.updateUserInfo()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
  p {
    margin-bottom: 18px;
  }
}
</style>
